<template>
  <div class="share-detail-container">
    <!-- 导航栏 -->
    <van-sticky>
      <MMNavBar back="/find"></MMNavBar>
    </van-sticky>

    <!-- 顶部 -->
    <div class="top-box" v-if="detail">
      <div class="title">
        {{ detail.title}}
      </div>
      <div class="info-box">
        <img :src="detail.author.avatar | addBaseUrl" alt="" />
        <div class="name-box">
          <span class="name">{{ detail.author.nickname}}</span>
          <span class="time">{{ detail.created_at | formatTime}}</span>
        </div>
      </div>
    </div>
    <!-- 内容 -->
    <div class="experience-content"
    v-if="detail"
    v-html="detail.content"
    ></div>
    <!-- 评论 -->
    <div class="comment-box">
      <!-- 顶部评论 -->
      <div class="title">评论 <span class="num">{{ total }}</span></div>
      <!-- vant的下拉组件 -->
      <van-list
        v-model="isLoading"
        :finished="isFinished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- 评论列表  @clickAvatar="clickAvatar"
        需要给子组件中传给的事件来一个声明-->
        <commentItem
        @clickAvatar="clickAvatar"
         v-for="item in comments" :key="item.id" :itemData="item">
        </commentItem>
      </van-list>
    </div>
    <!-- 底部盒子 -->
    <div class="bottom-box">
      <div class="input" @click="showReplay">我来补充两句</div>
      <div class="shoucang actived">
        <i class="iconfont iconbtn_shoucang_nor actived"></i>
        10
      </div>
      <div class="star actived">
        <i class="iconfont iconbtn_dianzan_small_nor actived"></i>
        10
      </div>
      <!-- <div class="share" @click="isShowImgPop = true"> -->
        <!-- 为了改善图片移动的bug,来一个事件函数,多做几件事情 -->
      <div class="share" @click="showImgPop">
        <i class="iconfont iconbtn_share"></i>
        10
      </div>
    </div>
    <!-- 底部回复弹出层 -->
    <!-- <commentPop :value="isShowRePop" @input="isShowRePop = $event"></commentPop> -->
    <!-- :placeholder="placeholder" 为了把这个值传给子组件,才加的这一行代码 -->
    <!-- @addComment="addComment" 为了接受子组件传递过来的事件,帮子组件解决问题 -->
    <!--:parentComment="parentComment" 也是为了给子组件传值  -->
    <commentPop
      :placeholder="placeholder"
      v-model="isShowRePop"
      @addComment="addComment"
      :parentComment="parentComment"
    ></commentPop>
    <!-- 分享弹出层 -->
        <!-- <imgPop :value="isShowImgPop" @input="isShowImgPop=$event"></imgPop> -->
    <imgPop v-model="isShowImgPop" :detail="detail"></imgPop>
  </div>
</template>

<script>
// 导入接口
import { getShareDetail, getShareComments } from '../../api/find'
// 导入评论列表组件
import commentItem from './commentItem'
// 导入 弹框组件
import commentPop from './commentPop'
// 导入 分享弹框组件
import imgPop from './imgPop'
export default {
  name: 'share-detail',
  components: {
    commentItem,
    commentPop,
    imgPop
  },
  data () {
    return {
      // 分享页面的弹窗,一般是隐藏的,只有点击的时候会变成true
      // 在子组件内部还有一个回传事件,让他变成false this.$emit('input', event)
      // 就是通过这个数据传递过来的
      isShowImgPop: false,
      // 是否显示回复弹框
      isShowRePop: false,
      // 回复框双向绑定的内容
      reInputValue: '',
      // 面经数据
      detail: undefined,
      // 评论列表
      comments: [],
      // 是否加载中
      isLoading: false,
      // 是否加载完毕
      isFinished: false,
      // 每页条数
      limit: 5,
      // 起始索引
      start: 0,
      // 传递给弹框的 提示文本
      placeholder: '回复',
      // 回复的父评论
      parentComment: undefined,
      // 评论总数
      total: 0
    }
  },
  created () {
    const { id } = this.$route.params
    this.$toast.loading()
    // 调用接口获取数据
    getShareDetail(id).then(res => {
      console.log(res)
      this.detail = res.data.data
    })
  },
  methods: {
    // 点击弹出分享弹框
    showImgPop () {
      // 滚动到顶部
      window.scrollTo(0, 0)
      // 显示弹框
      this.isShowImgPop = true
    },
    // 点击我来补充两句的按钮,弹出回复弹框
    showReplay () {
      this.isShowRePop = true
      // 还原提示文本为回复
      this.placeholder = '回复'
      // 清空回复的父评论
      this.parentComment = undefined
    },
    // 点击头像,回复评论,这个事件是从子组件传递过来的,参数也是从子组件传递过来的
    // 这个参数,就是整条的这个评论数据
    clickAvatar (commentData) {
      this.isShowRePop = true
      this.placeholder = `回复:${commentData.author.nickname}`
      this.parentComment = commentData
    },
    // 触底之后加载
    // 触底加载更多
    onLoad () {
      // id
      const { id } = this.$route.params
      // 页码 和索引 这句代码牛逼,直接从data中获取这两个值了,而且把data也给省了
      const { limit, start } = this
      getShareComments({
        id,
        limit,
        start
      }).then(res => {
        // console.log(res)
        // 赋值,用结构赋值的方式,把res.data.data.list中的数据都给到comments这一个数组中
        this.comments.push(...res.data.data.list)
        // 关闭loading状态
        this.isLoading = false
        // 累加索引 直接在这里每次增加限制的条数,让他显示不同的数据,累加操作,可以
        this.start += this.limit
        // 保存评论总数
        this.total = res.data.data.total
        // 是否加载完毕?
        if (this.comments.length >= res.data.data.total) {
          // 加载完毕
          this.isFinished = true
        }
      })
    },
    // 点击添加评论 这个值是从子组件中传递过来是更改父组件内容的
    addComment (newComment) {
      // console.log('newComment:', newComment)
      this.comments.unshift(newComment)
    }
  }
}
</script>

<style lang="less">
.share-detail-container {
  padding-bottom: 85px;
  .van-nav-bar__left {
    padding-left: 0;
  }
  .iconbtn_nav_back {
    font-size: 44px;
  }
  .top-box {
    background-color: @white-color;
    padding: 15px;
    .title {
      font-size: 18px;
      font-weight: 500;
    }
  }
  .info-box {
    margin-top: 15px;
    display: flex;
    align-items: center;
    img {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      margin-right: 9px;
    }
    .name-box {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      .name {
        font-size: 12px;
        font-weight: 600;
        color: @subdominant-font-color;
      }
      .time {
        font-size: 12px;
        color: @minor-font-color;
      }
    }
    .zan-box {
      span {
        color: @minor-font-color;
        font-size: 12px;
      }
      .iconfont {
        color: @minor-font-color;
        font-size: 24px;
      }
    }
  }
  .experience-content {
    padding: 15px;
    font-size: 16px;
    color: @main-font-color;
    background-color: @white-color;
    img {
      width: 100%;
      display: block;
    }
  }
  .comment-box {
    margin-top: 10px;
    background-color: @white-color;
    padding: 26px 15px;
    .title {
      font-size: 18px;
      font-weight: 500;
      position: relative;
      span {
        color: @minor-font-color;
        font-size: 12px;
        position: absolute;
        left: 40px;
        top: -5px;
      }
    }
  }
  .bottom-box {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 85px;
    display: flex;
    box-sizing: border-box;
    padding: 10px 15px 0;
    background-color: @white-color;
    width: 100%;
    justify-content: space-between;
    .input {
      height: 34px;
      background: @border-color;
      border-radius: 4px;
      flex: 1;
      font-size: 14px;
      margin-top: 10px;
      color: @minor-font-color;
      margin-right: 24px;
      line-height: 34px;
      padding-left: 6px;
    }
    div:not(.input) {
      font-size: 12px;
      color: @minor-font-color;
      i {
        display: block;
        font-size: 28px;
      }
    }
    .shoucang {
      margin-right: 24px;
      text-align: center;
      &.actived {
        color: @main-color;
      }
    }
    .star {
      margin-right: 24px;
      text-align: center;
      &.actived {
        color: @main-color;
      }
    }
    .share {
      text-align: center;
    }
  }
  .re-pop {
    padding: 25px 15px 0;
    overflow: hidden;
    box-sizing: border-box;
    // 弹出层
    .van-cell::after {
      border-bottom: none;
    }
    .van-field {
      height: 99px;
      width: 100%;
      background: @border-color;
      border-radius: 4px;
    }
    span {
      font-size: 16px;

      float: right;
      margin-top: 11px;
      color: @main-color;
      &.disabled {
        color: @minor-font-color;
      }
    }
  }
}
</style>
